import { Component, Input, NgZone } from '@angular/core';
import { LoadingController, NavController, ViewController, App, AlertController, NavParams } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
import { GLCatalogProvider } from './classes/GLCatalog';

@Component({
	template: `
	<ion-list>
		<ion-item (click)="home()">Home</ion-item>
		<ion-item (click)="jumpHymn()">Jump to Hymn</ion-item>
		<ion-item>
			<ion-label>Paragraphs</ion-label>
			<ion-toggle [ngModel]="paragraphs" (ngModelChange)="setParagraphs($event)"></ion-toggle>
		</ion-item>
	</ion-list>
	`
})
export default class MenuPage {
	paragraphs: boolean;
	constructor(private viewCtl: ViewController, private appCtl: App, private params: NavParams, private zone: NgZone, private alertCtl: AlertController, private loadingCtl: LoadingController, private catalogProvider: GLCatalogProvider) {
		console.log(params);
	}
	ngOnInit() {
		this.paragraphs = "paragraphs" in localStorage;
	}
	setParagraphs(value) {
		this.zone.run(() => {
			this.paragraphs = !!value;
		});
		console.log("setting to", value);
		if(value) {
			localStorage.paragraphs = "yes";
		}
		else {
			delete localStorage.paragraphs;
		}
		this.params.data.updateParagraphs();
	}
	home() {
		this.viewCtl.dismiss();
		this.appCtl.getRootNav().setPages([{
			page: HomePage
		}]);
	}
	jumpHymn() {
		this.viewCtl.dismiss();
		this.alertCtl.create({
			title: "Jump to Hymn",
			inputs: [
				{name: "no", type: "number"}
			],
			buttons: [
				{
					text: "Cancel",
					role: "cancel",
					handler: () => {}
				},
				{
					text: "Go",
					handler: (data) => {
						let loading = this.loadingCtl.create();
						loading.present();
						this.catalogProvider.getCatalog()
						.then((catalog) => catalog.getItem("/hymn/"+data.no))
						.then((item) => this.appCtl.getRootNav().push(HomePage, {item}))
						.catch(console.error)
						.then(() => loading.dismiss());
					}
				}
			]
		}).present();
	}
}
